<html>

<head>
    <style>
        * {
            padding: 0;
        }

        #path1 {
            stroke: #9C27B0;
            position: absolute;
            stroke-dasharray: 25% 0;
            /* animation: animation 3s linear infinite; */
        }

        #path2 {
            stroke: red;
            position: absolute;
            stroke-dasharray: 25%;
            stroke-dashoffset: 0%;
            animation: animation 3s linear infinite;
        }

        @keyframes animation {
            100% {
                stroke-dashoffset: 50%;
            }
        }

        #banner {
            position: absolute;
            top: 12px;
            left: 13px;
        }

        #rectbg{
            stroke: red;
        }
        /* 
            规律总结，能循环起来的，必须把全部分成偶数对
            动画偏移2个虚线长度，完成连续
        */
        #rect1 {
            stroke-dasharray: 125;
            stroke-dashoffset: 0;
            stroke: green;
            /* 1000; */
            animation: rectani1 3s linear infinite;
        }
        @keyframes rectani1 {
                100%{
                    stroke-dashoffset: 250;
                }
        }

        #circlebg{
            stroke: black;
        }
        #circle1{
            stroke-dasharray: 78.5;
            /* 314 */
            stroke-dashoffset: 0;
            stroke: green;
            animation: cirani1 3s linear infinite;
        }
        @keyframes cirani1 {
            100%{
                stroke-dashoffset: 157;
            }
        }
    </style>
</head>

<body>
    <!-- <img id='banner' src="../bannerimg.png"> -->
    <svg id="path" version="1.1" xmlns="http://www.w3.org/2000/svg" width="520" height="255" viewBox="0 0 520 255"
        fill="none" stroke-width="20">
        <symbol id="onepath">
            <path d="M5,5H500V235H5Z" />
        </symbol>
        <symbol id="onerect">
            <rect width="300" height="200" x="30" y="30"  style="stroke-width: 10;" />
        </symbol>
        <symbol id="onecircle">
            <circle x="30" y="30" cx="150" cy="100" r="50" style="stroke-width: 10;" />
        </symbol>
        <g>
            <!-- <use xlink:href="#onepath" id="path1" /> -->
            <!-- <use xlink:href="#onepath" id="path2" /> -->
            <use xlink:href="#onerect" id="rectbg"  />
            <use xlink:href="#onerect" id="rect1" />
        </g>
        <g>
            <use xlink:href="#onecircle" id="circlebg" />
            <use xlink:href="#onecircle" id="circle1" />
        </g>
    </svg>
</body>
<script src="https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.easing@1.3(jquery.easing.1.3.min.js)"></script>
<script src="../jquery-drawsvg-master/public/jquery.drawsvg.js"></script>
<script>
    $(function () {
        var svgid = "rect1";
        var svg = $('#' + svgid);
        // 获取path的长度：getTotalLength
        // if (svg) {
        //     console.log('svg:' + svgid, '总长度：', svg);
        // }
    })

    // $(function () {
    //     var svg = $('#path');
    //     console.log('svg==>', svg);
    //     svg.drawsvg({
    //         callback: () => {
    //             console.log('playcomplete');
    //         },

    //     });
    //     // svg.drawsvg('animate');
    //     // var $doc = $(document);
    //     // var $win = $(window);
    //     // console.log(max, $doc.height(), $win.height(), $win, $doc);
    //     // var max = $doc.height() - window.screen.height;

    //     // $win.on('scroll', function () {
    //     //     var p = $win.scrollTop() / max;
    //     //     svg.drawsvg('progress', p);
    //     // })
    // })
</script>

</html>